<template>
  <div class="table-wrapper">
    <el-tabs
      v-model="activeName"
      type="card"
      @tab-click="handleClick"
    >
      <el-tab-pane
        label="编辑表格"
        name="编辑表格"
      >
        <edit-table />
      </el-tab-pane>
      <el-tab-pane
        label="单行编辑表格"
        name="单行编辑表格"
      >
        <single-edit-table />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script lang="ts" setup name='table-list-4'>
import { ref } from 'vue';

import EditTable from './edit-table.vue';
import SingleEditTable from './single-edit-table.vue';

import type { TabsPaneContext } from 'hive-plus';

const activeName = ref('编辑表格');

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
</script>
<style lang="scss" scoped>
  .table-wrapper {
    width: 100%;
    height: 100%;
    background: #fff;
  }
</style>
